<template>
  <el-dialog
    v-dialog-drag
    title="导出JSON"
    :visible.sync="showExportJsonDialogFlag"
    :show-close="true"
    class="small-padding-dialog"
    center
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    @closed="close"
  >
    <code-editor
      id="ExportJson"
      v-model="jsonContent"
      :mode="'json'"
      :readonly="false"
    />
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        :data-clipboard-text="jsonRawContent"
        @click="copyFormJson"
      >
        复制JSON
      </el-button>
      <el-button @click="showExportJsonDialogFlag = false"> 关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
import CodeEditor from "Yan/components/code-editor/index";
import { copyToClipboard } from "Yan/utils";
export default {
  components: { CodeEditor },
  props: {
    designer: Object,
  },
  data() {
    return {
      showExportJsonDialogFlag: false,
      jsonContent: "",
      jsonRawContent: "",
    };
  },
  methods: {
    show() {
      const JsonObj = this.designer.exportJson();
      // console.log(JsonObj);
      this.jsonContent = JSON.stringify(JsonObj, null, "  ");
      this.jsonRawContent = JSON.stringify(JsonObj);
      this.showExportJsonDialogFlag = true;
    },
    close() {
      this.jsonContent = "";
      this.jsonRawContent = "";
    },
    copyFormJson(e) {
      copyToClipboard(
        this.jsonRawContent,
        e,
        this.$message,
        "复制JSON成功",
        "复制JSON失败"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .small-padding-dialog {
    .el-dialog__header {
      //padding-top: 3px;
      //padding-bottom: 3px;
      background: #f1f2f3;
    }

    .el-dialog__body {
      padding: 12px 15px 12px 15px;

      .el-alert.alert-padding {
        padding: 0 10px;
      }
    }

    .ace-container {
      border: 1px solid #dcdfe6;
    }
  }
}
</style>
